<template>
	<view class="wanl-order-list">
		<scroll-view :scroll-left="scrollLeft" scroll-x="true" class="navbar bg-white margin-bottom-sm fixed">
			<view class="nav-item text-df margin-lr" v-for="(item, index) in navList" :key="index"
				:class="{ current: tabCurrentIndex === index }" @tap="tabClick(index)">
				{{ item.text }}
			</view>
		</scroll-view>
		
		<wanl-scroll-list ref="list" :option="{ page: 1, auto: true, safeArea: true}" @load="load($event,'load')" @refresh="load($event,'refresh')" style="padding-top: 80rpx;">
			<view class="list-scroll-content">
				<!-- 订单列表 -->
				<view v-for="(order, okey) in orderList" :key="order.id" class="order-item">
					<view class="header">
						<view class="shop flex align-center justify-start">
							<text class="text-df">订单编号</text>
							<text class="text-s" @tap="$wanlshop.copy(order.order_no)">{{order.order_no}}</text>
						</view>
						<view class="text-sm">
							<text class="state" :style="{ color: order.stateTipColor }">{{ order.stateTip }}</text>
							<!-- <text class="margin-left-sm wlIcon-lajitong" @tap="deleteOrder(order.id,okey)"></text> -->
						</view>
					</view>
					<!-- 商品 -->
					<view class="goods-box"
						@tap="$wanlshop.to(`/pages/user/record/nursing/details?id=${order.id}&type=nursing&t=1`)">
						<view class="cu-avatar xl margin-right-sm radius"
							:style="{backgroundImage: 'url('+$wanlshop.oss(order.product.image, 70, 70)+')'}">
						</view>
						<view class="content margin-right-bj">
							<view class="describe">
								<view class="text-cut-2">
									{{order.product.title}}
								</view>
								<!-- <view class="">
									<text class="">服务地址：</text>
									<text class="">{{order.order_address && order.order_address.address}}</text>
								</view> -->
								<view class="">
									<text class="">下单时间：</text>
									<text class="">{{order.createtime_text}}</text>
								</view>
							</view>
						</view>
					</view>
					<!-- 底部 -->
					<view class="price-box text-sm flex">
						<!-- <view>单价：{{order.price}}</view> -->
						<view class="margin-left-xs">数量：x{{order.quantity || 1}}</view>
						<view class="margin-left-xs">合计：<text class="text-price">{{order.order_money}}</text>
						</view>
					</view>
					<!-- <view class="action-box padding-bottom-bj">
						<button v-if="order.status == 1" class="cu-btn radius10 line-green margin-right-sm"
							@tap="cancelOrder(order,key)">取消订单</button>
						<button v-if="order.status == 1" class="cu-btn radius10 margin-right-sm bg-green"
							@tap="paymentOrder(order.id)">立即支付</button>
						<button v-if="(order.status > 1 && order.status < 8) && order.overaftersale == 1"
							class="cu-btn radius10 margin-right-sm bg-green" @tap="onRefund(order)">申请售后</button>
					</view> -->
					<view class="action-box padding-bottom-bj">
						<button v-if="order.order_status < 7" class="cu-btn radius10 line-green margin-right-sm" @tap="$wanlshop.auth('/pages/user/service')">联系客服</button>
						<button v-if="order.order_status == 1" class="cu-btn radius10 line-green margin-right-sm" @tap="cancelOrder(order)">取消订单</button>
						<button v-if="order.order_status == 1" class="cu-btn radius10 bg-green margin-right-sm" @tap="paymentOrder(order.id)">立即支付</button>
						<button v-if="order.order_status == 4" class="cu-btn radius10 margin-right-sm line-green" @tap="commentOrder(order)">评论订单</button>
						<!-- <button v-if="order.order_status == 4" class="cu-btn radius10 margin-right-sm bg-green" @tap="startService(order,okey)">确认完成</button> -->
						<button v-if="(order.order_status == 2 || order.order_status == 3)" class="cu-btn radius10 margin-right-sm bg-green" @tap="onRefund(order)">{{order.is_refund == 1? '查看售后' : '申请售后'}}</button>
					</view>
				</view>
				
				<view class="edgeInsetBottom"></view>
			</view>
		</wanl-scroll-list>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				orderList:[],
				tabCurrentIndex: 0,
				scrollLeft: 0,
				navList: [{
						status: 0,
						text: '全部'
					},
					{
						status: 1,
						text: '待支付'
					},
					{
						status: 2,
						text: '待确认'
					},
					{
						status: 3,
						text: '已确认'
					},
					{
						status: 4,
						text: '已入住'
					},
					{
						status: 5,
						text: '服务取消'
					}
				]
			};
		},
		methods: {
			load(paging,key) {
				let index = this.tabCurrentIndex;
				let navItem = this.navList[index];
				let order_status = navItem.status;
				uni.request({
					url: `/addons/nursing/api.order/lists`,
					data: {
						status: order_status,
						page: paging.page
					},
					success: res => {
						let orderList = res.data.data.filter(item => {
							//添加不同状态下订单的表现形式
							item = Object.assign(item, this.orderStateExp(item.order_status));
							//演示数据所以自己进行状态筛选
							if (order_status === 0) {
								//0为全部订单
								return item;
							}
							return item.order_status === order_status;
						});
						if(key == 'load') {
							this.orderList = [...this.orderList, ...orderList];
							this.$refs.list.loadSuccess({ list: this.orderList, total: res.data.total });
						} else if(key == 'refresh') {
							this.orderList = orderList;
							this.$refs.list.refreshSuccess({ list: orderList, total: res.data.total });
						}
					}
				});
			},
			// commentOrder(id){
			// 	this.$wanlshop.to('/pages/user/order/comment?order_id=' + id);
			// },
			commentOrder(order){
				let data = {
					image: order.product.image,
					title: order.product.title,
					sub_title: order.order_money,
					source_id: order.product.id,
					goods_id:order.product.id
				}
				this.$wanlshop.to(`/pages/user/record/comment?order_id=${order.id}&type=nursing&t=4&data=${encodeURIComponent(JSON.stringify(data))}`);
			},
			onRefund(item) {
				console.log(item)
				// is_refund  1 不可以售后  2 可以售后
				if (item.is_refund == 2) { //申请退款
					this.$wanlshop.to(`/pages/user/refund/apply?data=${encodeURIComponent(JSON.stringify({
					order_id: item.id,
					order_type: 'nursing',
					goods: {
						image: item.product.image,
						title: item.product.title,
						difference: item.product.title,
						goods_id: item.product.id
					}
				}))}`);
				} else { // 查看详情
					this.$wanlshop.to(`/pages/user/refund/details?id=${refund_id}`);
				}
			},
			//顶部tab点击
			tabClick(index) {
				this.$refs.list.refreshScrollView()
				this.tabCurrentIndex = index;
				this.load({page:1},'refresh')
				this.scrollLeft = index * 60
				console.log(this.navList)
			},
			//取消订单- 设置为7 -全局
			async cancelOrder(item, index) {
				// 获取列表
				await uni.request({
					url: `/addons/nursing/api.order/cancel`,
					method: 'POST',
					data: {
						order_id: item.id
					},
					success: res => {
						this.$refs.list.refreshScrollView()
						this.load({page:1},'refresh')
						this.$wanlshop.msg('订单取消成功')
					}
				});
			},
			//支付订单
			paymentOrder(id) {
				this.$wanlshop.to(`/pages/user/money/pay?id=${id}&type=nursing`);
			},
			//订单状态文字和颜色
			orderStateExp(order_status) {
				let stateTip = '',
					stateTipColor = '#4CBD66';
				switch (+order_status) {
					case 1:
						stateTip = '待付款';
						stateTipColor = '#f40';
						break;
					case 2:
						stateTip = '待确认';
						stateTipColor = '#f40';
						break;
					case 3:
						stateTip = '已确认';
						stateTipColor = '#f40';
						break;
					case 4:
						stateTip = '已入住';
						break;
					case 5:
						stateTip = '服务取消';
						break;
						//更多自定义
				}
				return {
					stateTip,
					stateTipColor
				};
			},
			getRefund(status) {
				return ["退款", "退款中", "待退货", "退款完成", "退款关闭", "退款被拒"][status];
			}
		}
	};
</script>

<style lang="less" scoped>
	page {
		height: 100%;
	}

	.navbar {
		display: flex;
		justify-content: flex-start;
		white-space: nowrap;

		.nav-item {
			display: inline-flex;
		}
	}

	.order-item {
		margin: 0 0 10rpx 0;
		padding: 12rpx 0 38rpx 30rpx;

		&:last-child {
			margin: 0;
		}

		.header {
			display: flex;
			justify-content: space-between;
			align-items: center;
			height: 42rpx;
			padding-right: 30rpx;

			.state {
				display: inline-block;
				font-family: PingFang SC-Medium, PingFang SC;
				height: 42rpx;
			}

			.shop {
				text {
					display: inline-block;

					&:nth-child(1) {
						font-family: PingFang SC-Medium, PingFang SC;
						font-weight: 400;
						color: #888888;
						height: 42rpx;
						line-height: 42rpx;
					}

					&:nth-child(2) {
						font-family: PingFang SC-Medium, PingFang SC;
						font-weight: 400;
						color: #333333;
						height: 42rpx;
						line-height: 42rpx;
						margin-left: 10rpx;
					}
				}
			}
		}

		.goods-box {
			padding-top: 0;
			margin-top: 16rpx;
			display: flex;
			justify-content: flex-start;
			align-items: center;

			.cu-avatar {
				width: 140rpx;
				height: 140rpx;
			}

			.describe {
				>text {
					display: inline-block;
					font-size: 32rpx;
					font-family: PingFang SC-Bold, PingFang SC;
					font-weight: bold;
					color: #333333;
					line-height: 44rpx;
					margin-bottom: 18rpx;
				}

				view {
					display: flex;
					justify-content: flex-start;

					&:nth-child(1) {
						margin-bottom: 10rpx;
					}

					text {
						display: inline-block;

						&:nth-child(1) {
							font-size: 27rpx;
							font-family: PingFang SC-Medium, PingFang SC;
							color: #888888;
							line-height: 44rpx;
						}

						&:nth-child(2) {
							font-size: 25rpx;
							font-family: PingFang SC-Medium, PingFang SC;
							color: #333333;
							line-height: 44rpx;
							width: 400rpx;
						}
					}
				}
			}
		}

		.price-box {
			padding: 0;
			padding-right: 30rpx;
			margin: 12rpx 0 0 0;
			font-size: 24rpx;
			color: #888888;

			text {
				font-size: 36rpx;
				color: #E31F1F;
				font-weight: bold;
			}
		}

		.action-box {
			padding-bottom: 0;

			button {
				font-size: 30rpx;
				font-family: PingFang SC-Medium, PingFang SC;
				font-weight: 500;
				margin-top: 28rpx;
			}
		}
	}
</style>